<template>
  <div>
    <h1>【aty-select-tree】 component demo</h1>
    <p>【aty-select-tree】 本质 aty-tree 和 aty-select 的组合</p>
    <aty-row class="fd-select-tree-box">
      <aty-title level="4">【有搜索-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value1"></aty-text>
      <aty-select-tree :can-search="true" :data="data" v-model="value1" clearable />
      【多选】当前选中的值: <aty-text :text="value2.join(',')"></aty-text>
      <aty-select-tree :can-search="true" multiple :data="data" v-model="value2" />

      <aty-title level="4">【没有搜索-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value3"></aty-text>
      <aty-select-tree :can-search="false" :data="data" v-model="value3" clearable />
      【多选】当前选中的值: <aty-text :text="value4.join(',')"></aty-text>
      <aty-select-tree :can-search="false" multiple :data="data" v-model="value4" />

      <aty-title level="4">【表单中-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value5"></aty-text>
      <aty-select-tree :can-search="false" :data="data" v-model="value5" clearable />
      【多选】当前选中的值: <aty-text :text="value6.join(',')"></aty-text>
      <aty-select-tree :can-search="false" multiple :data="data" v-model="value6" />

      <aty-title level="4">【改变值-单选、多选】</aty-title>
      <aty-button @click="clearSingle">清空</aty-button><aty-button @click="selectSingle">选择蔺树</aty-button><br>
      【单选】当前选中的值: <aty-text :text="value7"></aty-text>
      <aty-select-tree ref="tree7" :can-search="true" :data="data" v-model="value7" clearable />
      <aty-select-tree :can-search="true"  :data="data" v-model="value7" clearable />
      <aty-button @click="clearMul">清空</aty-button><aty-button @click="selectMul">选择蔺树</aty-button><br>
      【多选】当前选中的值: <aty-text :text="value8.join(',')"></aty-text>
      <aty-select-tree :can-search="false" multiple :data="data" v-model="value8" />
      <aty-select-tree :can-search="true" multiple :data="data" v-model="value8" />

      <aty-title level="4">【校验-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value9"></aty-text>
      <aty-select-tree required :can-search="true" :data="data" v-model="value9" clearable />
      【多选】当前选中的值: <aty-text :text="value10.join(',')"></aty-text>
      <aty-select-tree required :can-search="true" multiple :data="data" v-model="value10" />

    </aty-row>
    <!--fd-select-box  end-->
  </div>
</template>
<script>
  export default {
    data () {
      return {
        value1: '1-1-1',
        value2: ['1-1-1'],
        value3: '1-1-1',
        value4: ['1-1-1'],
        value5: '1-1-1',
        value6: ['1-1-1'],
        value7: '1-1-1',
        value8: ['1-1-1'],
        value9: '1-1-1',
        value10: ['1-1-1'],

        data2: [],
        data: (function (len) {
          var _data = []
          let k = 0
          for (let i = 0; i < len; i++) {
            k++
            _data.push(
              {
                name: '一级 ' + k,
                id: '' + k,
                disabled: k == 2,
                open: true,
                children: [{
                  id: k + '-' + k,
                  name: '二级 ' + k + '-' + k,
                  disabled: false,
                  children: [{
                    icon: '/src/components/css/images/treeIcon/avatar.png',
                    id: k + '-' + k + '-' + k,
                    disabled: false,
                    name: '三级 ' + k + '-' + k + '-' + k
                  }]
                }]
              }
            )
          }
          return _data
        })(7)
      }
    },
    methods: {
      change: function (newValue, oldValue) {
        console.log('treeNodeData')
        console.log(newValue)
      },
      clearSingle () {
        this.value7 = ''
        // this.$nextTick(() => {
        //   this.$refs.tree7.validate();
        // })
      },
      selectSingle () {
        this.value7 = '1-1-1'
      },
      clearMul () {
        this.value8 = []
      },
      selectMul () {
        this.value8 = ['1-1-1', '2-2-2']
      }
    },
    mounted () {
      var _data = [];
      var k = 0;
      for (var i = 0; i < 7; i++) {
        k++;
        _data.push({
          name: '一级 ' + k,
          id: '' + k,
          icon: 'images/headLogo.png',
          disabled: k == 2 ? true : false,
          open: true,
          children: [{
            id: k + '-' + k,
            icon: 'images/headLogo.png',
            name: '二级 ' + k + '-' + k,
            disabled: k == 2 ? true : false,
            children: [{
              icon: 'images/logo.png',
              id: k + '-' + k + '-' + k,
              disabled: k == 2 ? true : false,
              name: '三级 ' + k + '-' + k + '-' + k
            }]
          }]
        })
      }
      this.data2 = _data
    }
  }
</script>
<style lang="less" type="text/less">
  .fd-select-tree-box {
    margin: 0 20px;
    text-align:left;
    >.aty-row {
      padding-bottom: 10px;
    }
  }
</style>
